<template>
  <view class="container">
    <!-- 页面内容 -->
    <view class="welcome-section">
      <text class="welcome-title">欢迎使用智能货架系统</text>
      <text class="welcome-subtitle">{{ userStore.isLoggedIn ? `您好，${getUserName()}` : '请登录以获取更好的体验' }}</text>
    </view>
    
    <!-- 其他页面内容 -->
    
    <!-- 登录弹窗 -->
    <login-popup ref="loginPopupRef" @login-success="handleLoginSuccess"></login-popup>
    
    <!-- 登录管理器 -->
    <login-manager ref="loginManagerRef" @login-success="handleLoginSuccess"></login-manager>
  </view>
</template>

<script setup>
import { ref, onMounted, onShow } from 'vue';
import { useUserStore } from '@/store/user';
import LoginPopup from '@/components/login-popup.vue';
import LoginManager from '@/components/login-manager.vue';

const userStore = useUserStore();
const loginPopupRef = ref(null);
const loginManagerRef = ref(null);

// 获取用户名称
const getUserName = () => {
  if (!userStore.userInfo) return '';
  
  if (userStore.isMerchant()) {
    return userStore.userInfo.shopName || userStore.userInfo.username || '商家用户';
  } else {
    return userStore.userInfo.username || '用户';
  }
};

// 处理登录成功
const handleLoginSuccess = () => {
  console.log('登录成功，刷新页面数据');
  // 这里可以添加刷新页面数据的逻辑
};

onMounted(() => {
  console.log('首页加载完成');
  
  // 设置登录弹窗引用
  if (loginManagerRef.value) {
    loginManagerRef.value.setLoginPopupRef(loginPopupRef.value);
  }
});

onShow(() => {
  console.log('首页显示');
  
  // 检查是否需要显示登录弹窗
  if (loginManagerRef.value) {
    loginManagerRef.value.checkLoginPopup();
  }
  
  // 触发页面显示事件，用于路由监听
  if (typeof uni !== 'undefined') {
    uni.$emit('page-show');
  }
});
</script>

<style>
.container {
  padding: 30rpx;
}

.welcome-section {
  margin: 50rpx 0;
  text-align: center;
}

.welcome-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  color: #666;
}
</style>
